<!--
 * @Date: 2023-03-27 13:04:53
 * @LastEditTime: 2023-03-30 18:33:47
 * @FilePath: /NLK/src/views/KLine/components/lineCharts.vue
 * 介绍:图表
-->
<script lang="ts" setup>
import vueEcharts, { ECOption } from "@@/utils/echarts";
import { NlkLineCharts } from "@@/api/page/KLine";
const props = defineProps<{
  kline: NlkLineCharts.Kline | undefined;
}>();

const option = computed<ECOption | undefined>(() => {
  return {
    grid: {
      top: "10%",
      bottom: "10%",
      left: "15%",
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "#29a17e",
        },
      },
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: props.kline?.times,
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: props.kline?.prices,
        type: "line",
        smooth: true,
        showSymbol: false,
        lineStyle: {
          color: "#29a17e",
        },
        itemStyle: {
          color: "#29a17e",
        },
        areaStyle: {
          color: "#29a17e22",
        },
      },
    ],
  };
});
</script>

<template>
  <div @touchmove.prevent>
    <vueEcharts v-if="props.kline" style="height: 500rem" :option="option" />
  </div>
</template>

<style lang="less" scoped></style>
